<template> 


	<div class="footerguide" style="background:#fff">
       <a href="javascript:;" class="guide_item" :class="{on:'/miste'===$route.path}" @click="goTo('/miste')">
       	
       	  <span class="item_icon">
       	  	  <i class="iconfont icon-gouwu"></i>
       	  </span>
       	  <span>外卖</span>

       </a>
       <a href="javascript:;" class="guide_item" :class="{on:'/search'===$route.path}"  @click="goTo('/search')">
       	
       	  <span class="item_icon">
       	  	  <i class="iconfont icon-sousuo"></i>
       	  </span>
       	  <span>搜索</span>

       </a>
       <a href="javascript:;" class="guide_item" :class="{on:'/order'===$route.path}"  @click="goTo('/order')">
       	
       	  <span class="item_icon">
       	  	  <i class="iconfont icon-activity_fill"></i>
       	  </span>
       	  <span>订单</span>

       </a>
       <a href="javascript:;" class="guide_item" :class="{on:'/profile'===$route.path}"  @click="goTo('/profile')">
       	
       	  <span class="item_icon">
       	  	  <i class="iconfont icon-people_fill"></i>
       	  </span>
       	  <span>我的</span>

       </a>

	</div> 

</template> 


<script> 


export default {

   methods:{
   	   goTo(path){
         this.$router.replace(path);

   	   }
   }
  

} 


</script>

<style lang="stylus" rel="stylesheet/stylus">
 @import "../../common/stylus/mixins.sty"
 .footerguide
 	top-border-1px(#e4e4e4)
 	height 50px
 	width 100%
 	position fixed
 	right 0
 	left 0
 	bottom 0
 	display flex
 	.guide_item
 		flex 1
 		display flex
 		text-align center
 		flex-direction column
 		align-items center
 		color #999999
 		text-decoration none
 		margin 5px
 		&.on
 			color red
 		span
 			font-size 12px
 			margin-bottom 2px
 			margin-top 2px
 			.iconfont
 				font-size 26px





  		


    
  		



</style>